<template>
	<div>
		<!-- 选择餐点时段 -->
		<div class="food-title-box">
			<p class="food-title">选择餐点时段:</p>
			<select class="mySelect" v-model="selected">
				<option v-for="(item, index) in stageList" :key="index" @click="changeTab(index)" :value="item.contentParam">{{item.name}}</option>
			</select>
			<!--<span>{{selected}}</span>-->
			<blue-button text="新增" :clickEvent="clickAdd" class="rightBtn"></blue-button>
		</div>
		<table class="sv-table">
			<tr class="table-th">
				<th>餐点时段</th>
				<th>资源位</th>
				<th>资源名称</th>
				<th>资源类型</th>
				<th>更新日期</th>
				<th>操作</th>
			</tr>
			<tr class="table-tr" v-for="(item,index) in dataList">
				<th>{{innitRelType(item.relType)}}</th>
				<th>{{item.relPosition== 'title'?'标题位':'内容位'}}</th>
				<th>{{'餐点配置'}}</th>
				<th>{{item.relPosition == 'title'?'-':'商品'}}</th>
				<th>{{item.updateTm?myGetTime(item.updateTm):myGetTime(item.createTm)}}</th>
				<th style="text-align: center;">
					<gray-button class="grayBtn" :text="'更新'" :clickEvent="clickEdit.bind(this, index,item)"></gray-button>
					<gray-button class="grayBtn" :text="'删除'" :clickEvent="deleteGoods.bind(this, item)"></gray-button>
				</th>
			</tr>
		</table>
		<edit-model ref="editModel" title="餐点配置">
			<div class="slot-notice food" style="text-align: left;" slot="main">
			
				<div class="textleft">
					<p class="eidt-slot-title" style="width: 50%;">选择餐点时段<span class="required">*</span>：</p>
					<select name="ss" class="mySelect" style="width: 50%;margin-left: 0;" v-model="addSelected">
						<option  v-for="option in stageList" :value="option.contentParam">{{option.name}}</option>
					</select>
					<!--<span>{{addSelected}}</span>-->
				</div>
				
				<div class="textleft" v-if="uploadType == 'add'">
                    <p class="eidt-slot-title">资源位：</p>
                    <div style="display: inline-block;">
                        <label ><input type="checkbox" name="tuiguang" :checked="type === 'title'" @click="changeType(0)" />标题</label>
                        <label><input type="checkbox" name="tuiguang" :checked="type === 'content'" @click="changeType(1)" />内容</label>
                    </div>
				</div>
				<div class="textleft" v-if="type === 'content'">
                    <p class="eidt-slot-title">推广类型：</p>
                    <div style="display: inline-block;">
                        <label><input type="checkbox" name="tuiguang" :checked="flag"/>商品</label>
                        <label><input type="checkbox" name="tuiguang" :checked="!flag" class="casor" @click="provient($event)"/>活动</label>
                    </div>
				</div>
				<div class="textleft" v-if="type === 'title'">
					<p class="eidt-slot-title" style="width: 50%;">主标题<span class="required">*</span>：</p>
					<input type="text" style="width: 50%;" v-model="relTitle"/>
					<!--<span>{{selected}}</span>-->
				</div>
				<div class="textleft" v-if="type === 'title'">
					<p class="eidt-slot-title" style="width: 50%;">副标题<span class="required">*</span>：</p>
					<input type="text" style="width: 50%;" v-model="relSubtitle"/>
				</div>
				
				<div v-if="type === 'content'">
					<p class="eidt-slot-title">宣传图片</p>
					<div class="upload-box">
						<!-- <img-upload :imgShowList="getBannerUrl ? [getBannerUrl] : []"></img-upload> -->
						<img-upload :deleteCallback="deleteImgCallback" ref="bannerImg" :imgShowList="getBannerUrl ? [getBannerUrl] : []">
						</img-upload>
					</div>
				</div>
				<div class="textleft" v-if="type === 'content'">
					<p class="eidt-slot-title" style="width: 50%;">商品编码<span class="required">*</span>：</p>
					<input type="text" style="width: 50%;" v-model="goodsCode" @click="showMenu()" readonly />
				</div>
				<div class="textleft">
					<p class="eidt-slot-title" style="width: 50%;">展示时间<span class="required">*</span>：</p>
					<input type="text" style="width: 50%;" v-model="showTime" disabled="disabled" class="casor"/>
					<!--<span>{{selected}}</span>-->
				</div>
				<div class="fabu-box" style="text-align: center;">
					<blue-button text="发布" :clickEvent="upLoadImg"></blue-button>
					<gray-button text="取消" :clickEvent="hideModel" class="confimBtn"></gray-button>
				</div>
			</div>
			<div slot="slide">
				<search-encode ref="searchModel" @getgoodscodedata="getgoodscode"></search-encode>
			</div>
		</edit-model>
		<m-toast ref="toast"></m-toast>
		<m-dialog ref="dialog"></m-dialog>
	</div>

</template>

<script>
	import BlueButton from "../../../edit-components/BlueButton";
	import SearchEncode from "../../../edit-components/SearchProduct";
	import getDate from "./getGoodsDate.js";
	import madd from "./add.js";
	import medit from "./edit.js";
	import deleteGoods from './delete.js';
	import GrayButton from "../../../edit-components/GrayButton";
	import imgUpload from "../../../real-components/ImgUpload2";
	import EditModel from "../../../edit-components/EditModel";
	import Toast from "../../../edit-components/Toast";
	import Dialog from "../../../edit-components/Dialog";
	export default {
		props: {
	        relGroup: {
	            type: String,
	            default: ""
	        }
	    },
		data() {
			return {
				stageList: [{
						name: "早餐",
						titleParam: "breakfastTitle",
						contentParam: "breakfast",
						time:"22:30-08:29"
					},
					{
						name: "上午茶",
						titleParam: "teaTitle",
						contentParam: "tea",
						time:"08:30-10:29"
					},
					{
						name: "午餐",
						titleParam: "lunchTitle",
						contentParam: "lunch",
						time:"10:30-13:59"
					},
					{
						name: "下午茶",
						titleParam: "afternoonTeaTitle",
						contentParam: "afterNTea",
						time:"14:00-16:29"
					},
					{
						name: "晚餐",
						titleParam: "dinnerTitle",
						contentParam: "dinner",
						time:"16:30-19:29"
					},
					{
						name: "夜宵",
						titleParam: "supperTitle",
						contentParam: "supper",
						time:"20:00-22:29"
					},
				],
				selected:'',
				dataList:[],
				uploadType:'',
				ziyuanwei:'',
				addSelected:'',
				getBannerUrl:'',
				type:'title',
				flag:true,
				relTitle:'', //主标题
				relSubtitle:'',//副标题
				showTime:'', //展示时间
				goodsCode:'',//商品编码
				editItem:null,
				oldSlected:''
			}
		},
		components: {
			"blue-button": BlueButton,
			"search-encode": SearchEncode,
			"gray-button": GrayButton,
			"img-upload": imgUpload,
			"edit-model": EditModel,
			"m-toast": Toast,
			"m-dialog": Dialog,
		},
		computed: {
			myDateList() {
				console.log("*-*--**--*-*-*-*-*-*-*-",this.dataList)
				return this.dataList;
			},
			mySelectd(){
				console.log(111)
				return this.selected;
			}
		},
		methods: {
			/*获取商品编码*/
			showMenu() {
				this.$refs.editModel.showSlideMenu();
				this.$refs.searchModel.hideModel();
			},
			getgoodscode(msg) {
				this.goodsCode = msg;
			},
			errorToast(msg, duration = 1000) {
				this.$refs.toast.toast(msg, duration);
			},
			//数据 渲染
			getDateList(newVal) {
				let callback = (data) => {
					this.dataList = data;
					console.log("特色商品数据", this.dataList);
				}
				getDate(callback, this.relGroup,newVal);
			},
			myGetTime(param) {

				if(param) {
					let date = new Date(param);
					let year = date.getFullYear();
					let month = checkTime(date.getMonth() + 1);
					let day = checkTime(date.getDate());
					let hour = date.getHours();
					let min = checkTime(date.getMinutes());
					let sec = checkTime(date.getSeconds());
					let str = '';
					let mHour = 0;
					if(0 < Number(hour) && Number(hour) < 12) {
						mHour = hour;
						str = '上午'
					} else {
						mHour = Number(hour) - 12;
						str = '下午'

					}
					//					console.log(hour,'时间');
					function checkTime(i) {
						if(i < 10) {
							i = '0' + i;
						}
						return i;
					}

					return year + '/' + month + '/' + day + '  ' + str + ' ' + mHour + ':' + min;
				} else {
					return '';
				}
			},
			showModel() {
				this.$refs.editModel.showCover();
			},
			hideModel() {
				this.$refs.editModel.hideCover();
			},
			innitRelType(type){
//				console.log("0-0-0-0-00----00-0--00-", type);
				for(let i = 0; i < this.stageList.length; i++){
					if(this.stageList[i].contentParam == type){
//						console.log('88***88***88')
						return this.stageList[i].name;
					}
				}
			},
			changeType(num){
				if(this.uploadType == 'add'){
					if(num == 0){
						this.type = 'title';
					}else{
						this.type = 'content';
					}
				}else{
					if(this.editItem.relPosition == 'title'){
						this.type = 'title';
					}
					if(this.editItem.relPosition == 'content'){
						this.type = 'content';
					}
				}
				
				console.log(this.type);	
			},
			getParams(){
				if(this.uploadType == 'add') {
					var params = {
						relPosition: this.type,
						relType: this.addSelected,
						storeCode:window.api.shopCode,
						relGroup:this.relGroup,
						showTime:this.showTime
					}
					if(this.type == 'content' ){
						console.log('/-/-/-/-/--/--/-')
						params.publicityPicture = this.imgUrl;
						params.goodsCode = this.goodsCode;
						params.promotionType = 0   //推广类型  0 代表商品  1 代表活动
						
					}
					if(this.type == 'title'){
						params.relSubtitle = this.relSubtitle;
						params.relTitle = this.relTitle;
					}
				} else if(this.uploadType == 'edit') {
					var params = {
						storeCode:window.api.shopCode,
						relPosition: this.type,
						relType: this.addSelected,
						rid: this.editItem.rid,
						relGroup:this.relGroup,
						showTime:this.showTime
					}
					if(this.type == 'content' ){
//						console.log('/-/-/-/-/--/--/-')
						params.publicityPicture = this.imgUrl;
						params.goodsCode = this.goodsCode;
						params.promotionType = 0   //推广类型  0 代表商品  1 代表活动
						
					}
					if(this.type == 'title'){
						params.relSubtitle = this.relSubtitle;
						params.relTitle = this.relTitle;
					}
				}
    
				return params;
			},
			add() {
				let params = this.getParams();

				let callback = data => {
					this.dataList = data;
					this.$refs.editModel.hideCover();
				}
				this.innitType();
				madd(params,this.relGroup,this.selected,callback);
			},
			edit() {
//				relId
				let params = this.getParams();
				let callback = data => {
					this.dataList = data;
					this.$refs.editModel.hideCover();
				}
				this.innitType();
				medit(params,this.relGroup,this.selected,callback);
			},
			clickAdd() {
				this.showModel();
				this.uploadType = 'add';
//				this.selected = '';
				this.getBannerUrl = '';
				this.relTitle = ''; //主标题
				this.relSubtitle = '';//副标题
				this.showTime = ''; //展示时间
				this.goodsCode = '';//商品编码
				this.addSelected = 'breakfast';
				this.showTime = "22:30-08:29";
				if( this.editItem && this.editItem.relPosition == 'content'){
					this.$refs.bannerImg.deleteImg();	
				}

			},
			clickEdit(index,item) {

				if(item.relPosition == 'title'){
					this.type = 'title';
				}else{
					this.type = 'content';
				}
				this.getBannerUrl = item.publicityPicture;
				this.relTitle = item.relTitle; //主标题
				this.relSubtitle = item.relSubtitle;//副标题
				this.showTime = item.showTime; //展示时间
				this.goodsCode = item.goodsCode;//商品编码
				this.uploadType = 'edit';
				this.addSelected = item.relType;
				this.editItem = item;
				
				this.showModel();
				
			},
			provient(mevent){
				mevent.target.checked = false;
			},
			deleteGoods(item) {
				console.log(item, 'aa');
				let msg = '确定要删除吗？';
				let confirmFn = () => {
					let params = {
						rid: item.rid,
						storeCode:window.api.shopCode,
						relGroup:this.relGroup
					}
					let callback = data => {
						this.dataList = data;
					}
					deleteGoods(params,this.relGroup,this.selected,callback);
				}
				
				this.infoDialog(msg, confirmFn);

			},
			infoDialog(msg, confirmFn) {
				this.$refs.dialog.dialog({
					msg,
					confirmFn
				});
			},
			async upLoadImg() {
				let flag = this.checkedData();

				if(!flag){
					return ;
				}
				
				if(this.type == 'title'){
					if(this.uploadType=='add'){
						this.add();
					}else{
						this.edit();
					}
				}else if(this.type == 'content'){
					let response = await this.$refs.bannerImg.upload();
					if(this.uploadType=='add'){
						if(response.status === 0) {
							this.errorToast("图片上传失败");
							return;
						}
						if(response.status === 2) {
							this.errorToast("暂未上传图片");
							return;
						}
					}
					if(this.uploadType == 'add'){
						if(response.status === 1) {
							this.imgUrl = response.data[0];
							this.add();
						}
					}else{
						if(response.status === 1) {
							this.imgUrl = response.data[0];
							this.edit();
						}else if(response.status === 2){
							this.edit();
						}
					}
				}
//				console.log(this.$refs,'meiyou ');
			},
			//验证主标题副标题
			checkedData(){
				
				if(this.type == 'title'){
					if(this.relTitle == ''){
						this.errorToast("请填写标题");
						return false;
					}else if(this.relSubtitle == ''){
						this.errorToast("请填写副标题");
						return false;
					}else{
						return true;
					}
				}else if(this.type == 'content'){
					if(this.goodsCode == ''){
						this.errorToast("请填写商品编码");
						return false;
					}else{
						return true;
					}
				}
				
			},
		
			//判断是商品还是活动
			deleteImgCallback() {
				this.imgUrl = '';
			},
			//初始化餐点类型
			innitType(){
				this.selected = 'breakfast';
			}
		},
		
		filters: {
			startTimeFilter: function(time) {
				let date = new Date(time);
				return `${date.getFullYear()}-${date.getMonth()}-${date.getDate()}  ${date.getHours() > 9 ? date.getHours() : '0' + date.getHours()}:${date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes()}`;
			}
		},
		created() {
			this.innitType();
			this.getDateList('breakfast');
		},
		mounted() {
			// initData () {

			// }
		},
		watch: {
			selected(newVal,oldVal){
				this.getDateList(newVal);
			},
			addSelected(newVal,oldVal){
				for(let i = 0; i < this.stageList.length; i++){
//					console.log(this.stageList[i].contentParam,newVal,'99')
					if(this.stageList[i].contentParam == this.addSelected){
//						console.log(this.stageList[i],'88');
						this.showTime = this.stageList[i].time;
					}
				}
				console.log(this.showTime,'&&&&&')
			}
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.food-title-box {
		display: flex;
	}
	
	.food-list {
		width: 80px;
		height: 16px;
	}
	
	.food-title {
		font-size: 16px;
		line-height: 16px;
		height: 16px;
	}
	
	.mySelect {
		border: 1px solid #ddd;
		padding: 5px 5px;
		width: 10%;
		height: unset;
		margin-bottom: 10px;
		margin-left: 20px;
	}
	
	.rightBtn {
		margin-left: 20px;
	}
	.confimBtn {
		margin-left: 20px;
	}
	
	.grayBtn {
		display: inline-block;
	}
	.casor{
		cursor:not-allowed; 
	}
	.fabu-box {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}
	.casor{
		cursor:not-allowed; 
	}
	.textleft{
		margin-top: 0.4rem;
	}
</style>